<template>
  <div class="app-container">
    <div class="header-tool">
      <div class="breadcrumb-overview">概览</div>
      <div class="pull-right">
        <el-button type="primary" size='small'>编辑</el-button>
        <el-button type="primary" plain size='small'>自定义卡片</el-button>
        <el-button type="primary" size='small'>完成</el-button>
      </div>
    </div>
    <div class="app-container-cont" :style="{'--color':theme?'white':'black'}">
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">待处理工单</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
                <ul class="base-ul qz">
                  <li>王大锤 提交 <span class="text-danger">紧急</span> 住客报警 2020-09-09 12:00:00；<a href=''>处理</a></li>
                  <li>王大锤 提交 <span class="text-danger">紧急</span> 住客报警 2020-09-09 12:00:00；<a href=''>处理</a></li>
                  <li>王大锤 提交 <span class="text-danger">紧急</span> 住客报警 2020-09-09 12:00:00；<a href=''>处理</a></li>
                  <li>王大锤 提交 <span class="text-danger">紧急</span> 住客报警 2020-09-09 12:00:00；<a href=''>处理</a></li>
                  <li>王大锤 提交 <span class="text-danger">紧急</span> 住客报警 2020-09-09 12:00:00；<a href=''>处理</a></li>
                  <li>王大锤 提交 <span class="text-danger">紧急</span> 住客报警 2020-09-09 12:00:00；<a href=''>处理</a></li>
                </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">我发起的酒店工单</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
                <ul class="base-ul">
                  <li class="flex-row"><div class="flex-box"><span class="text-danger">【紧急】</span> 住客报警 2020-09-09 12:00:00；</div><el-tag type="warning" size="mini">待分配</el-tag></li>
                  <li class="flex-row"><div class="flex-box"><span class="text-warning">【高】</span> 住客报警 2020-09-09 12:00:00；</div><el-tag type="warning" size="mini">待审核</el-tag></li>
                  <li class="flex-row"><div class="flex-box"><span class="">【标准】</span> 住客报警 2020-09-09 12:00:00；</div><el-tag type="success" size="mini">已分配</el-tag></li>
                  <li class="flex-row"><div class="flex-box"><span class="">【标准】</span> 住客报警 2020-09-09 12:00:00；</div><el-tag type="primary" size="mini">进行中</el-tag></li>
                </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">酒店工单统计分类</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
              <div class="chart-wrapper">
                <pie-chart/>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">客房出租收入</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
              <el-radio-group v-model="radio1" size="small">
                <el-radio-button label="本周"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="本季度"></el-radio-button>
              </el-radio-group>
              <div class="chart-wrapper">
              <bar-chart />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">客房状态</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
              <div class="text-right progress-box ms"><span class="label">总故障次数</span><span class="num">123,456</span></div>
              <div class="chart-wrapper">
                <el-col :span='8' class="text-center progress-box">
                  <div class="progree-text"><div class="label">全部设备</div><div class="num">123,456</div></div>
                  <el-progress type="circle" :percentage="75" :stroke-width="15" :show-text='false'/>
                </el-col>
                <el-col :span='8'  class="text-center progress-box">
                  <div class="progree-text"><div class="label">在线</div><div class="num">123,456</div></div>
                  <el-progress type="circle" :percentage="25" :stroke-width="15" :show-text='false'  status="success"/>
                  </el-col>
                <el-col :span='8'  class="text-center progress-box">
                  <div class="progree-text"><div class="label">故障</div><div class="num">123,456</div></div>
                  <el-progress type="circle" :percentage="50" :stroke-width="15" :show-text='false' status="exception" />
                </el-col>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">商品收入</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
              <el-radio-group v-model="radio1" size="small">
                <el-radio-button label="本周"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="本季度"></el-radio-button>
              </el-radio-group>
              <div class="chart-wrapper">
                  <pie-chart />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">酒店工单统计分类</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
              <el-radio-group v-model="radio1" size="small">
                <el-radio-button label="本周"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="本季度"></el-radio-button>
              </el-radio-group>
              <div class="chart-wrapper">
                <line-chart :chart-data="lineChartData" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <h2 class="box-header-title">客房出租收入</h2>
              <span class="more">更多</span>
            </div>
            <div class="box-body">
              <el-radio-group v-model="radio1" size="small">
                <el-radio-button label="本周"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="本季度"></el-radio-button>
              </el-radio-group>
              <div class="chart-wrapper">
                  <bar-chart />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import PieChart from './components/PieChart';
import BarChart from './components/BarChart';
import LineChart from './components/LineChart';

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  name: 'Dashboard',
  components:{
    PieChart,
    BarChart,
    LineChart,
  },
  data() {
    return {
      radio1:'本周',
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/theme.scss";
$color:var(--color);
  .el-row{
    .el-col{
      margin-bottom: 20px;
    }
  }
  .more{
    float: right;
    cursor: pointer;
  }
  .box-body{
    height: 270px;
    overflow: auto;
    position: relative;
    .base-ul.qz{
      list-style: outside;
      padding-left:30px ;
      li{
        padding-left: 5px;
        a{text-decoration: underline;}
      }
    }
    .progress-box{
      position: relative;
      .progree-text{
        position: absolute;
        left: 20px;
        top:40px;
        right: 20px;
        text-align: center;
        padding: 10px 0;
        .num{
          font-size: 18px;
          font-weight: 700;
          margin-top: 5px;
        }
      }
    }
    .ms{
      height: 30px;
      margin-bottom: 20px;
      .num{font-weight: 700; font-size: 18px;margin:0 5px}
    }
    .el-radio-group{
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 99999999;
    }
    .el-progress-circle{
      width: 150px;
      height: 150px;
    }
    @media screen and (max-width: 1200px){
      
    }
  }
</style>
